<template>
  <!--案件管理-自定义出入催-->
  <section class="page custom-case-collection">
    <data-form
      :model="model"
      @onSearch="refreshData"
      :page="pageService"
      @handleResetForm="follFeedback"
    >
      <template slot="inputs">
        <el-form-item label="导入时间" prop="createdTime">
          <el-date-picker
            placeholder="请选择导入时间"
            type="daterange"
            value-format="yyyy-MM-dd"
            v-model="model.createdTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="caseState">
          <el-select v-model="model.caseState" placeholder="请选择">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CustomFollowState')"
              :key="index"
              :label="name" 
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求类型" prop="caseType">
          <el-select v-model="model.caseType" placeholder="请选择">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CustomFollowType')"
              :key="index"
              :label="name"
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求方式" prop="caseMode">
          <el-select v-model="model.caseMode" placeholder="请选择">
            <el-option
              v-for="{ index, name, code } in $dict.getDictData('CustomFollowMode')"
              :key="index"
              :label="name"
              :value="code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户号/客户号" prop="caseNumber">
          <el-input auto-complete="off" v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="操作人" prop="operatorRealName">
          <el-input auto-complete="off" v-model="model.operatorRealName" :maxlength="20"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="buttons">
        <!--按钮区域-->
        <el-button @click="dialog.caseExcelImport = true, submitType = 'Enrollment'" v-auth="23394">入催导入</el-button>
        <el-button @click="dialog.caseExcelImport = true, submitType = 'OutReminder'" v-auth="23395">出催导入</el-button>
        <el-button @click="onClickInTemplateImport" v-auth="23396">入催模版下载</el-button>
        <el-button @click="onClickOutTemplateImport" v-auth="23397">出催模版下载</el-button>
      </template>
      <template slot="columns">
        <el-table-column
          prop="createdTime"
          label="导入时间"
          :formatter="row => $filter.dateTimeFormat(row.createdTime)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="caseType"
          label="请求类型"
          :formatter="
            row => $filter.dictConvert(row.caseType, 'CustomFollowType')
          "
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="caseMode"
          label="请求方式"
          :formatter="
            row => $filter.dictConvert(row.caseMode, 'CustomFollowMode')
          "
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="accountNumber"
          label="客户号/账户号"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
             <div v-if="scope.row.accountNumber">
                 {{scope.row.accountNumber}}
             </div>
             <div v-else>
                 {{scope.row.personalNo}}
             </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="personalName"
          label="客户姓名"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="caseState"
          label="状态"
          :formatter="
            row => $filter.dictConvert(row.caseState, 'CustomFollowState')
          "
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operatorName"
          label="操作人"
          :min-width="$helper.getColumnWidth(4)"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <el-button @click="onClickDelete(scope.row)" type="text"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          prop="principalName"
          label="导入数量"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column>
        <el-table-column
          prop="personalName"
          label="导入方式"
          :min-width="$helper.getColumnWidth(3)"
        >
        </el-table-column>
        <el-table-column
          prop="idCard"
          label="导入状态"
          :min-width="$helper.getColumnWidth(6)"
        >
        </el-table-column>
        <el-table-column
          prop="loanDate"
          label="操作人"
          :formatter="row => $filter.dateFormat(row.loanDate)"
          :min-width="$helper.getColumnWidth(5)"
        >
        </el-table-column>
        <el-table-column
          prop="mobileNo"
          label="操作时间"
          :min-width="$helper.getColumnWidth(4)"
        >
        </el-table-column> -->
        <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
          <template slot-scope="scope">
            <!-- <el-button @click="onClickDetail(scope.row)" type="text"
              >查看导入详情</el-button
            >
            <el-button @click="onClickFailDetail(scope.row)" type="text"
              >查看失败原因</el-button
            > -->
            <el-button @click="onClickDelete(scope.row)" type="text" :disabled="scope.row.caseState === 'ALREADY'" v-auth="23405"
              >删除</el-button
            >
            <!-- <el-button @click="onClickSure(scope.row)" type="text"
              >确认</el-button
            > -->
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!--案件出，入弹出框-->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialog.caseExcelImport"
      title="案件导入"
      append-to-body
    >
      <!-- <case-custom-excel-import-new
        @close="dialog.caseExcelImport = false"
        @success="refreshData"
        :submitType="submitType"
        ref="case-custom-excel-import-new"
      ></case-custom-excel-import-new> -->
      <case-custom-excel-import-new
        @close="dialog.caseExcelImport = false"
        :submitType="submitType"
        ref="case-custom-excel-import-new"
      ></case-custom-excel-import-new>
    </el-dialog>

    <!-- 导入详情 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="dialog.exportDetail"
      title="导入详情"
    >
      <export-detail @close="dialog.exportDetail = false" />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { State } from "vuex-class";
import NumberRange from "~/components/common/number-range.vue";
import caseCustomExcelImportNew from "~/components/common/case-custom-excel-import-new.vue";
import { PageService } from "~/utils/page.service";
import { CaseInfoService } from "~/services/domain-service/case-info.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { CustomFollowService } from "~/services/domain-service/custom-follow.service";
import ExportDetail from "./export-detail.vue";
@Layout("workspace")
@Component({
  components: {
    NumberRange,
    caseCustomExcelImportNew,
    ExportDetail
  }
})
export default class CustomCaseCollection extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(CaseInfoService) private caseInfoService: CaseInfoService;
  @Dependencies(CustomFollowService) private customFollowService: CustomFollowService;
  @Dependencies(DataImportExcelInfoService)
  private importExcelService: DataImportExcelInfoService;
  private dialog: any = {
    caseExcelImport: false,
    exportDetail: false
  };
  private submitType: any = "";
  private model: any = {
    createdTime: "",
    caseSate: "",
    caseType: "",
    caseMode: "",
    personalNo: "",
    operatorName: "",
    caseNumber: "",
    operatorRealName: ""
  };
  private listData = {
    customFollowDetailList: [],
    personalNameKey: {},
    personalNoKey: {},
    url: ""
  }
  private dataSet: any = [];
  private exportStatus: any = [];

  private paramsHandler() {
    const params = { ...this.model };
    // params.createdTimeDateMin = this.model.createdTime[0] + "00:00:00";
    // params.createdTimeDateMax = this.model.createdTime[1] + "23:59:59";
    params.createdTimeDateMin = this.$filter.dateRanageFormat(this.model.createdTime).start;
    params.createdTimeDateMax = this.$filter.dateRanageFormat(this.model.createdTime).end;
    // params.createdTimeDateMin = this.model.createdTime[0];
    // params.createdTimeDateMax = this.model.createdTime[1];
    delete params.createdTime;

    //账户号/客户号输入框输入内容前，应先选择请求方式
    if(this.model.caseMode === ''){
      if(this.model.caseNumber !== ''){
        this.$message.warning('请先选择请求方式！')
      }
    }

    return params;
  }
  //获取案件列表
  private refreshData() {
    // console.log('operatorRealName:',this.model.operatorRealName);
    // console.log('this.paramsHandler():',this.paramsHandler());
    
    this.customFollowService
      .findAllByPage(this.paramsHandler(), this.pageService)
      .subscribe((data) => {
        this.dataSet = data
      });
  }

  private mounted() {
    this.refreshData();
  }

  /**
   * 重置
   */
  private follFeedback() {}

  /**
   * 查看导入详情
   */
  private onClickDetail(row) {
    this.dialog.exportDetail = true;
  }

  /**
   * 查看失败详情
   */
  private onClickFailDetail(row) {}

  /**
   * 删除
   */
  private onClickDelete(row) {
    this.$confirm("您确定执行该操作吗？", {
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }).then(() => {
      const params: any = { 'id': row.id }
      this.customFollowService.deleteById(params, this.pageService).subscribe((data) => {
        this.refreshData()
      })
    });
  }

  /**
   * 确认
   */
  private onClickSure(row) {
    this.$confirm("您确定执行该操作吗？", {
      confirmButtonText: "确定",
      cancelButtonText: "取消"
    }).then(() => {});
  }

  /**
   * 入催模版下载
   */
  private onClickInTemplateImport() {
    this.customFollowService.downLoadFollowInTemplate().subscribe((data) => {
      console.log("data", data)
      this.$common.downloadFile(data);
    })
  }

  /**
   * 出催模版下载
   */
  private onClickOutTemplateImport() {
    this.customFollowService.downLoadFollowOutTemplate().subscribe((data) => {
      this.$common.downloadFile(data);
    })
  }
}
</script>

<style lang="less">
.page.introduction-case {
  .data-box {
    .error-row > td {
      color: #ff9813 !important;
      span {
        color: #ff9813 !important;
      }
    }
  }
}
</style>
